<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- <div class="navbar">
        <ul>
            <li id="boy"><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
            <li><a href="">5</a></li>
        </ul>
        <div class="search">
            <p>9898</p>
            <input type="button" value="">
            <input type="text">
            <input type="checkbox" name="check" id="">
        </div>
    </div> -->
    <div class="out">
        <ul>
            <li>11</li>
            <li>22</li>
            <li>33</li>
        </ul>
    </div>
    <!-- <script>
        var nav = document.getElementsByClassName("navbar")[0];//类名【0】第一个元素
        console.log(nav);
        var boy = document.getElementById("boy");//id
        console.log(boy);
        var li = document.getElementsByTagName("li");//标签名
        //打印全部节点名字
        console.log(li);
        var search = document.querySelector(".search");//参数可以是 类名 id 标签名
        console.log(search);
        var inputs = document.querySelectorAll(".search");
        //.search 的子元素个数 length
        console.log(inputs);
        var ul=document.getElementsByTagName("ul")[0];
        //获得的是子节点 包含所有的节点
        console.log(ul);

        //获取父节点
        console.log(ul.parentNode);

        console.log(ul.parentNode.nextSibling);
        
        console.log(ul.childNodes);//获取子节点 返回数组

        console.log(ul.nextSibling);

        console.log(search.firstChild);
        //获得的子元素
        console.log(ul.children);
        // 显示ul代码
        console.log(ul.innerHTML);
        //显示ul元素值
        console.log(ul.innerText);

        ul.innerHTML='<a href ="">来</a>';

        console.log(ul.innerHTML);//获取标签

        console.log(ul.innerText);//只获取文本 忽略标签

        
        //4.attribute
        // console.log(input.getAttribute("type"));

        // console.log(input.getAttribute("text"));
    </script> -->
<script>
    //尾添加
    var li = document.createElement("li");
    li.innerText = 44;
    var ul = document.querySelector("ul");
    ul.appendChild(li);
    console.log(li);

    //克隆 浅克隆
    var ul = document.querySelector("ul");
    var li =document.querySelector("li");
    var newli = li.cloneNode();
    newli.innerText = 55;
    //var newli = li.cloneNode(true);
    // ul.appendChild(newli);

    var  third = document.querySelectorAll("li")[2];
    ul.insertBefore(newli,third);
    document.write("<p>what the hell?</p>");
    ul.removeChild(third);

    
</script>
</body>
</html>